<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜-Every day</title>
    <link rel="shortcut icon" href="./2023_03_16_fonts/images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./2023_03_16_fonts/css/conmm.css">
    <link rel="stylesheet" href="./2023_03_16_fonts/css/index.css">
    <link rel="stylesheet" href="./2023_03_16_fonts/css/detail.css">
</head>
<body>
    <div class="top-nav">
        <ul class="row">
            <li>欢迎来到天天生鲜！</li>
            <li class="space"></li>
            <li>登录</li>
            <li>|</li>
            <li>注册</li>
            <li>|</li>
            <li>用户中心</li>
            <li>|</li>
            <li>我的购物车</li>
            <li>|</li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="main">
    <div class="top-search"></div>
    <img src="./2023_03_16_fonts/images/logo.png" alt="">
    <div class="serch-box">
        <input type="text" placeholder="请输入商品名称">
        <span>搜索</span>
    </div>
    </div>
    <div class="cart-box">
        <div class="cart-text">我的购物车</div>
        <div class="cart-num">1</div>
    </div>
    <div class="cate-titbox">
    </div>
    <div class="nav">
       <span>全部分类</span> <li></li> <span>新鲜水果</span> <li></li> <span>商品详情</span>
    </div>

    <div class="detail">
        <div class="row">
            <img src="./2023_03_16_fonts/images/goods.jpg">
            <div class="gd">
                <div class="tit">新疆吐鲁番葡萄</div>
                <p>吐鲁番昼夜温差大，葡萄粒大味甜</p>
                <div class="price-box"></div>
                <span>￥<font size="16">16.80</font></span>
                <span>单位<span>
            </div>
            <div class="asn">
                <label for="num">数量:</label>
                <div class="in">
                    <input type="text">
                    <div class="as">
                        <span>+</span>
                        <span>-</span>
            <div class="total">
                总价:<span>16.80</span>
            </div>
            <div class="btns">
                <button class="default">立即购买</button>
                <button class="delete">加入购物车</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="left">
            <div class="tit">新鲜水果</div>
            <div class="gad">
                <img src="./2023_03_16_fonts/images/goods02.jpg">
                <p>商品</p>
                <div class="des">￥3.96</div>
            </div>
            <div class="gad">
                <img src="./2023_03_16_fonts/images/goods/goods003.jpg">\
                <div class="gad-tit">商品</div>
                <div class="des">￥3.96</div>
            </div>
        </div>
        <div class="right">
            <div class="tits">
                <div class="title">商品介绍</div>
                <div class="title">评价</div>
            </div>
            <div class="cons">
                <div class="con">
                    商品详情
                </div>
                <div class="con">
                    评价
                </div>
            </div>
        </div>
        </div>
    </div>

    <div class="bottom">
        <ul class="row">
            <li>关于我们</li>
            <li>|</li>
            <li>联系我们</li>
            <li>|</li>
            <li>招聘人才</li>
        </ul>
        <p>
            CopyRight&copy;2023 22级移动应用开发
        </p>
        <p>
            电话:13412345678&nbsp;&nbsp;QQ:61004628@qq.com
        </p>
    </div>

    <script src="./js/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function(){
        $(".right .tits .titles").click(function(){
            $(".right .tits .titles").removeClass(active);
            $(this).addClass("active")
            let idx = $(this).index()
            $(".cons .con").hide()
            $($(".cons .con")[idx]).show();
        })
    })
</script>
</html>
    